<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>改变this指向-bind方法</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="d-grid gap-2 col-3 mx-auto" style="margin-top:50px">
    <button type="button" class="btn btn-dark code">发送验证码</button>
  </div>

  <script>
    //改变this指向-bind方法

    const obj = { name: '佩奇' }

    // 1. 基本使用
    function fun(x, y, z) {
      console.log(this)
      // console.log(x + y + z)
    }
    // fun()
    // bind 不会调用函数 这也是bind 与call ，apply的区别  
    // fun.bind()

    // 返回的是对原来函数的拷贝
    const res = fun.bind(obj)
    console.log(res)  //res 是原来fun函数长的一样
    console.log(res === fun)  //2个函数false

    // bind 可以改变this指向(修改的是res函数内的this指向)
    res()  //this指向obj
    fun()  //this指向window
    
    

    // bind不会调用函数
    // 返回的是对原来函数的拷贝 
    // bind 可以改变this指向


    // 2. 使用场景 - 不需要调用函数，但是又想改变函数内部的this指向（bind）

    // 1. 发送短信5秒倒计时业务
    const codeBtn = document.querySelector('.code')

    let flag = true  // 开关变量，用来防止多次点击

    codeBtn.addEventListener('click', function () {
      if (flag) {
        // 关闭开关 
        flag = false

        // 1.2 利用定时器做倒计时效果 setInterval 
        let i = 5
        // 点击之后立马变化文字
        this.innerHTML = `05秒后重新获取`
        // 定时器
        let timerId = setInterval(function () {
          // 定时器 延时器 里面的回调函数 this指向window
          i--
          this.innerHTML = `0${i}秒后重新获取`

          // 1.3 时间到了 就显示文字为 重新获取
          if (i === 0) {
            this.innerHTML = `重新获取`

            // 停止定时器
            clearInterval(timerId)
            flag = true
          }
        }.bind(this), 1000)
      }
    })
  </script>
</body>

</html>